<template>
  <div>
    <div class="flow-group">
      <div class="item-title">库管员信息</div>
      <el-row>
        <!--             v-if="scopeData.formDataDetail.flowState === 'INPUT'" -->
        <el-col :span="11" :offset="1">
          <el-button
            size="small"
            style="margin-bottom: 10px"
            type="primary"
            icon="el-icon-user"
            @click="addPerson"
            >添加库管员信息</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="personTableData"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{
            color: '$a9b5cd',
            'text-align': 'center',
            'background-color': '#F5F7FA',
          }"
          border
          size="small"
          class="tablecenter"
          style="margin-bottom: 30px"
        >
          <el-table-column prop="id" label="序号" type="index" />
          <!--                <el-table-column prop="userNo" label="工号">-->
          <!--                  <template slot-scope="scope">-->
          <!--                    <span>{{ scope.row.userNo }}</span>-->
          <!--                  </template>-->
          <!--                </el-table-column>-->
          <el-table-column prop="userName" label="姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="headIcon" label="照片">
            <template slot-scope="scope">
              <el-image
                :src="scope.row.headIcon"
                :preview-src-list="[scope.row.headIcon]"
                style="width: 80px; height: 100px"
                fit="fill"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" width="120px" label="操作">
            <template slot-scope="scope">
              <i
                class="el-icon-delete"
                style="cursor: pointer"
                @click="deletePerson(scope.$index, scope.row)"
                >删除</i
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <el-dialog
      :visible.sync="personDialogTableVisible"
      title="选择人员"
      append-to-body
    >
      <!--          -->
      <el-table
        :row-key="(item) => item.userNo"
        v-show="personDialogTableVisible"
        ref="personListTable"
        :data="personListData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handlePersonSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="userNo" label="工号">
          <template slot-scope="scope">
            <span>{{ scope.row.userNo }}</span>
          </template>
        </el-table-column>
        <el-table-column property="userName" label="姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column property="phone" label="手机号">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column property="headIcon" label="头像">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.headIcon"
              :preview-src-list="[scope.row.headIcon]"
              style="width: 80px; height: 100px"
              fit="fill"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="personDialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSelect">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const personData = [
  {
    userName: "张三",
    phone: "12345678901",
    headIcon: "https://img.yzcdn.cn/vant/cat.jpeg",
    userNo: "001",
  },
  {
    userName: "李四",
    phone: "12345678902",
    headIcon: "https://img.yzcdn.cn/vant/cat.jpeg",
    userNo: "002",
  },
  {
    userName: "王五",
    phone: "12345678903",
    headIcon: "https://img.yzcdn.cn/vant/cat.jpeg",
    userNo: "003",
  },
  {
    userName: "赵六",
    phone: "12345678904",
    headIcon: "https://img.yzcdn.cn/vant/cat.jpeg",
    userNo: "004",
  },
  {
    userName: "孙七",
    phone: "12345678905",
    headIcon: "https://img.yzcdn.cn/vant/cat.jpeg",
    userNo: "005",
  },
];
export default {
  data() {
    this.dicTypes = [
      "F_DENOMINATION",
      "F_CURRENCY_TYPE",
      "F_CURRENCY_EDITION",
      "F_CLEARING_FLAG",
    ];
    return {
      formBase: {
        businessDate: "",
        paymentOrg: "",
        operateStartTime: "",
        operateEndTime: "",
        person01: "",
        person02: "",
      },
      paymentTableData: [], // 缴款信息
      personTableData: [], // 库管员信息
      selectedPersonTableData: [], // 库管员信息
      personListData: [], // 人员信息
      realTempSelect: [],
      personDialogTableVisible: false, // 人员选择框显隐标志
      loading: true,
    };
  },
  methods: {
    getPersonList(param) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ data: { data: personData } });
        }, 2000);
      });
    },
    async addPerson() {
      this.personDialogTableVisible = true;
      const param = {};
      try {
        this.loading = true;
        const res = await this.getPersonList(param);
        this.personListData = res.data.data;
        this.loading = false;

        this.realTempSelect = this.selectedPersonTableData;
        console.log(this.realTempSelect, "打开弹窗拿取勾选的值");
        this.$nextTick(() => {
          this.$refs["personListTable"].clearSelection();
          this.realTempSelect.forEach((item) => {
            this.$refs["personListTable"].toggleRowSelection(item, true);
          });
        });
      } catch (e) {
        console.log("查询人员出错");
      }
    },
    confirmSelect() {
      if (this.selectedPersonTableData.length !== 2) {
        this.$alert("请选择两名库管员！", "提示", {
          confirmButtonText: "确定",
        })
          .then(() => {})
          .catch(() => {});
        return;
      }
      this.personDialogTableVisible = false;
      this.personTableData = this.selectedPersonTableData;
      console.log(this.selectedPersonTableData, "确认勾选的值");
      this.formBase.person01 = this.personTableData[0].userNo;
      this.formBase.person02 = this.personTableData[1].userNo;
    },
    deletePerson(index, row) {
      this.personTableData.splice(index, 1);
      if (this.selectedPersonTableData.length) {
        this.selectedPersonTableData = this.selectedPersonTableData.filter(
          (item) => item.userNo !== row.userNo
        );
        console.log(
          this.selectedPersonTableData,
          "this.selectedPersonTableData"
        );
      }
    },
    handlePersonSelectionChange(val) {
      console.log(val, "勾选的值");
      this.selectedPersonTableData = val;
    },
  },
};
</script>

<style lang="scss" scoped></style>
